<template>
  <div class="main" style="display: flex; flex-direction: column; ">
    <div
      style=" display: flex;justify-content: center;background-color: rgb(176, 229, 237);min-height: 60px;max-height: 60px;">
      <span style="color: #2c3e50; text-align: center;  font-size: 38px;  font-weight: 600;"
        class="table-name">车间时效区</span>
    </div>
    <div style="display: flex; gap: 20px; overflow: hidden;">
      <div style="display: flex;flex-direction: column;max-height: calc(100vh - 60px);justify-content: space-between;">
        <div
          style="width: 50px; height: 100px; background: #fff;text-align: center;line-height: 100px;border-bottom: 1px solid;border-right: 1px solid;">
          <span>大门</span>
        </div>
        <div
          style="width: 50px; height: 100px; background: #fff;text-align: center;line-height: 100px;border-bottom: 1px solid;border-right: 1px solid;border-top: 1px solid;">
          <span>大门</span>
        </div>
        <div
          style="width: 50px; height: 100px; background: #fff;text-align: center;line-height: 100px;border-bottom: 1px solid;border-right: 1px solid;border-top: 1px solid;">
          <span>大门</span>
        </div>
      </div>
      <!-- D -->
      <div style="display: flex;flex-direction: column;height: calc(100vh - 60px);">
        <div style="background-color: rgb(187, 224, 230); display: flex;  justify-content: center;height: 45px;">
          <span style=" color: #308eda;  text-align: center;  font-size: 28px;  font-weight: 600;">D线</span>
        </div>
        <div style="display: flex;flex: 1;gap: 10px; height: calc(100vh - 60px - 45px);">
          <div ref="dScrollView1" style=" overflow-y: auto;scrollbar-width: none;">
            <kuwei v-for="item in d1" :key="item" :kuWei="kuWeiMap[item]" :juanXin="juanXinMap[item]"
              :countdown="countdownMap[item]" :jieBangBtn="jieBangBtnMap[item]"></kuwei>
          </div>
          <div ref="dScrollView2" style=" overflow-y: auto;scrollbar-width: none;">
            <kuwei v-for="item in d2" :key="item" :kuWei="kuWeiMap[item]" :juanXin="juanXinMap[item]"
              :countdown="countdownMap[item]" :jieBangBtn="jieBangBtnMap[item]"></kuwei>
          </div>
        </div>
      </div>
      <!-- C -->
      <div style="display: flex;flex-direction: column;height: calc(100vh - 60px);">
        <div style="background-color: rgb(187, 224, 230); display: flex;  justify-content: center;height: 45px;">
          <span style=" color: #308eda;  text-align: center;  font-size: 28px;  font-weight: 600;">C线</span>
        </div>
        <div style="display: flex;flex: 1;gap: 10px; height: calc(100vh - 60px - 45px);">
          <div ref="cScrollView1" style=" overflow-y: auto;scrollbar-width: none;">
            <kuwei v-for="item in c1" :key="item" :kuWei="kuWeiMap[item]" :juanXin="juanXinMap[item]"
              :countdown="countdownMap[item]" :jieBangBtn="jieBangBtnMap[item]"></kuwei>
          </div>
          <div ref="cScrollView2" style=" overflow-y: auto;scrollbar-width: none;">
            <kuwei v-for="item in c2" :key="item" :kuWei="kuWeiMap[item]" :juanXin="juanXinMap[item]"
              :countdown="countdownMap[item]" :jieBangBtn="jieBangBtnMap[item]"></kuwei>
          </div>
        </div>
      </div>
      <!-- B -->
      <div style="display: flex;flex-direction: column;height: calc(100vh - 60px);">
        <div style="background-color: rgb(187, 224, 230); display: flex;  justify-content: center;height: 45px;">
          <span style=" color: #308eda;  text-align: center;  font-size: 28px;  font-weight: 600;">B线</span>
        </div>
        <div style="display: flex;flex: 1;gap: 10px; height: calc(100vh - 60px - 45px);">
          <div ref="bScrollView1" style=" overflow-y: auto;scrollbar-width: none;">
            <kuwei v-for="item in b1" :key="item" :kuWei="kuWeiMap[item]" :juanXin="juanXinMap[item]"
              :countdown="countdownMap[item]" :jieBangBtn="jieBangBtnMap[item]"></kuwei>
          </div>
          <div ref="bScrollView2" style=" overflow-y: auto;scrollbar-width: none;">
            <kuwei v-for="item in b2" :key="item" :kuWei="kuWeiMap[item]" :juanXin="juanXinMap[item]"
              :countdown="countdownMap[item]" :jieBangBtn="jieBangBtnMap[item]"></kuwei>
          </div>
        </div>
      </div>
      <div
        style="min-width: 60px; height: 80px; background: #fff;text-align: center;line-height: 80px;border-left: 1px solid;border-right: 1px solid;border-bottom: 1px solid;">
        <span>CD大门</span>
      </div>
      <!-- 高温间和A区 -->
      <div>
        <div
          style=" height: 300px;width: 1000px; border-left: 1px solid; border-bottom: 1px solid; text-align: center;line-height: 300px;font-weight: 600;font-size: 40px;">
          高温间
        </div>
        <div style="display: flex;gap: 20px;">
          <!-- A -->
          <div style="display: flex; height: calc(100vh - 60px - 300px);">
            <div
              style="width: 50px;background-color: rgb(187, 224, 230); display: flex;  align-items: center; max-height: calc(100vh - 60px);">
              <span style=" color: #308eda;  text-align: center;  font-size: 28px;  font-weight: 600;">A线</span>
            </div>
            <div
              style="display: flex;flex-direction: column; justify-content: space-around; max-height: calc(100vh - 60px);overflow: hidden;">
              <div ref="aScrollView1" style="display: flex; width: 750px;">
                <kuwei style="zoom: 0.5;" v-for="item in a1" :key="item" :kuWei="kuWeiMap[item]"
                  :juanXin="juanXinMap[item]" :countdown="countdownMap[item]" :jieBangBtn="jieBangBtnMap[item]"></kuwei>
              </div>
              <div ref="aScrollView2" style="display: flex; width: 550px; overflow-x: auto;scrollbar-width: none;">
                <kuwei style="zoom: 0.5;" v-for="item in a2" :key="item" :kuWei="kuWeiMap[item]"
                  :juanXin="juanXinMap[item]" :countdown="countdownMap[item]" :jieBangBtn="jieBangBtnMap[item]"></kuwei>
              </div>
              <div ref="aScrollView3" style="display: flex; width: 750px; ">
                <kuwei style="zoom: 0.5;" v-for="item in a3" :key="item" :kuWei="kuWeiMap[item]"
                  :juanXin="juanXinMap[item]" :countdown="countdownMap[item]" :jieBangBtn="jieBangBtnMap[item]"></kuwei>
              </div>
            </div>
          </div>

          <div style="display: flex; flex-direction: column; justify-content: space-around; ">
            <div
              style="width: 50px; height: 100px; background: #fff;text-align: center;line-height: 100px;position: absolute; bottom: 40%;right: 0; border-top: 1px solid; border-left: 1px solid; border-bottom: 1px solid;">
              <span>大门</span>
            </div>
            <div style="position: absolute; bottom: 1px;right: 0;">
              <div
                style="width: 50px; height: 50px; background: #fff;text-align: center;line-height: 50px;  border-top: 1px solid; border-left: 1px solid;">
                <span>大门</span>
              </div>
              <div style="border: 1px solid; height: 100px;">
              </div>
            </div>
            <div
              style="width: 50px; height: 50px; background: #fff;text-align: center;line-height: 50px; position: absolute; bottom: 1px;right: 65px; border-left: 1px solid; border-top: 1px solid; border-right: 1px solid;">
              <span>大门</span>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script setup>
import axios from 'axios'
import { ref, reactive } from 'vue';
import kuwei from './components/kuwei.vue'

const d1 = ["D01", "D02", "D03", "D04", "D05", "D06", "D07", "D08", "D09", "D10"]
const d2 = ["D11", "D12", "D13", "D14", "D15", "D16", "D17", "D18", "D19", "D20"]

const c1 = ["C01", "C02", "C03", "C04", "C05", "C06", "C07", "C08", "C09", "C10"]
const c2 = ["C11", "C12", "C13", "C14", "C15", "C16", "C17", "C18", "C19", "C20"]

const b1 = ["B01", "B02", "B03", "B04", "B05", "B06", "B07", "B08", "B09", "B10"]
const b2 = ["B11", "B12", "B13", "B14", "B15", "B16", "B17", "B18", "B19", "B20"]

const a1 = ["A01", "A04", "A07", "A10", "A13", "A16", "A19", "A22"]
const a2 = ["A02", "A05", "A08", "A11", "A14", "A17", "A20",]
const a3 = ["A03", "A06", "A09", "A12", "A15", "A18", "A21", "A23"]


const dScrollView1 = ref(null)
const dScrollView2 = ref(null)
const cScrollView1 = ref(null)
const cScrollView2 = ref(null)
const bScrollView1 = ref(null)
const bScrollView2 = ref(null)
const aScrollView1 = ref(null)
const aScrollView2 = ref(null)
const aScrollView3 = ref(null)

const scrollYMap = new Map()

const autoScrollY = (scrollView) => {
  if (!scrollYMap.has(scrollView)) {
    scrollYMap.set(scrollView, 0)
  }

  if (scrollView.value) {
    scrollYMap.set(scrollView, scrollYMap.get(scrollView) + 1) // 往下滚动1px
    scrollView.value.scrollTop = scrollYMap.get(scrollView)

    if (scrollView.value.scrollTop + scrollView.value.clientHeight >= scrollView.value.scrollHeight / 2) {
      const firstChild = scrollView.value.children[0];
      scrollYMap.set(scrollView, scrollYMap.get(scrollView) - 340)

      scrollView.value.appendChild(firstChild);
    }
  }
}

const autoScrollX = (scrollView) => {
  if (!scrollView.value) {
    return
  }

  if (scrollView.value.scrollLeft + scrollView.value.clientWidth >= scrollView.value.scrollWidth) {
    return
  }

  scrollView.value.scrollLeft += 1

  if (scrollView.value.scrollLeft + scrollView.value.clientWidth >= scrollView.value.scrollWidth) {
    const firstChild = scrollView.value.children[0];

    // 重置 scrollLeft 以防止跳跃
    scrollView.value.scrollLeft -= firstChild.offsetWidth * 0.5;

    scrollView.value.appendChild(firstChild);
  }
}

setInterval(() => {
  autoScrollY(dScrollView1)
  autoScrollY(dScrollView2)
  autoScrollY(cScrollView1)
  autoScrollY(cScrollView2)
  autoScrollY(bScrollView1)
  autoScrollY(bScrollView2)
  autoScrollX(aScrollView1)
  autoScrollX(aScrollView2)
  autoScrollX(aScrollView3)
}, 50)

// 禁用滚动
window.addEventListener('wheel', function (event) {
  event.preventDefault();
}, { passive: false });

const request = (url, data) => {
  return axios.post(url, data, {
    headers: {
      "Content-Type": "application/json-patch+json"
    }
  })
}

const kuWeiTypeList = reactive([])
const kuWeiMap = reactive({})
const getKuWei = async () => {
  const res = await request("http://172.21.56.96:9099/api/Sc_Kuwei/GetPageData", `{
    "page": 0,
    "rows": 0,
    "total": 0,
    "tableName": "string",
    "detailTable": "string",
    "sort": "string",
    "order": "string",
    "wheres": "string",
    "export": true,
    "filter": [
      {
        "name": "string",
        "value": "string",
        "displayType": "string"
      }
    ],
    "columns": [
      "string"
    ]
  }`)

  kuWeiTypeList.length = 0
  Object.keys(kuWeiMap).forEach(key => {
    delete kuWeiMap[key]
  })

  res.data.rows.sort((x, y) => {
    return x.id - y.id
  }).forEach(element => {
    const key = element.KuweiId[0]
    if (!kuWeiTypeList.includes(key)) {
      kuWeiTypeList.push(key)
    }

    if (!kuWeiMap[element.KuweiId]) {
      kuWeiMap[element.KuweiId] = element
    }
  });

  // console.log('/api/Sc_Kuwei/GetPageData:', kuWeiTypeList)
}

const countdownMap = reactive({})
function countdown(timeString, hour, cb) {
  // 将时间字符串转换为Date对象
  const targetTime = new Date(timeString);

  // 获取hour小时后的日期
  const endTime = new Date(targetTime.getTime() + hour * 60 * 60 * 1000);

  // 获取当前时间
  const now = new Date().getTime();

  // 计算剩余时间
  const distance = endTime - now;
  if (distance <= 0) {
    cb?.()
  }

  // 计算小时、分钟和秒
  const hours = Math.floor(distance / (1000 * 60 * 60));
  const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.floor((distance % (1000 * 60)) / 1000);

  return `${hours}小时${minutes}分钟${seconds}秒`
}

const juanXinMap = reactive({})
const jieBangBtnMap = reactive({})

const refrehJieBang = () => {
  for(const kuweiId in kuWeiMap){
    jieBangBtnMap[kuweiId] = false
  }

  for (const key in juanXinMap) {
    if (juanXinMap[key].sNstatus == '计时中') {
      countdownMap[key] = countdown(juanXinMap[key].tuirutime, juanXinMap[key].sxshijian, () => {
        jieBangBtnMap[key] = true
      })
    }
  }
}

const getJuanXin = async () => {

  const newJuanXinMap = {}

  for (const kuWei of kuWeiTypeList) {
    const res = await request("http://172.21.56.96:9099/api/Sc_juanxin/GetData", kuWei)
    for (const juanXin of res.data) {
      newJuanXinMap[juanXin.kuweiId] = juanXin
    }
    // console.log("http://172.21.56.96:9099/api/Sc_juanxin/GetData:", res.data)
  }

  Object.keys(juanXinMap).forEach(key => {
    delete juanXinMap[key]
  })

  for (const key in newJuanXinMap) {
    juanXinMap[key] = newJuanXinMap[key]
  }

  refrehJieBang()
}

const refreshData = async () => {
  await getKuWei()
  await getJuanXin()
  // console.log(kuWeiTypeList, juanXinMap)
}

// const updateData = async (kuweiId) => {
//   console.log(kuweiId, juanXinMap[kuweiId]);
//   const juanXin = Object.assign(juanXinMap[kuweiId],)
//   const data = `{
//     "mainData": {
//         "KuweiId": "${juanXin.kuweiId}",
//         "SNstatus": "计时完成",
//         "Tuirutime": "${juanXin.tuirutime}",
//         "SNone": "${juanXin.sNone}",
//         "SNtwo": "${juanXin.sNtwo}",
//         "SNthree": "${juanXin.sNthree}",
//         "SNfour": "${juanXin.sNfour}",
//         "SNfive": "${juanXin.sNfive}",
//         "SNsix": "${juanXin.sNsix}",
//         "SNseven": "${juanXin.sNseven}",
//         "SNeight": "${juanXin.sNeight}",
//         "SNnine": "${juanXin.sNnine}",
//         "id": ${juanXin.id ? `${juanXin.id}` : null}
//     },
//     "detailData": null,
//     "delKeys": null
// }`
//   await request("http://172.21.56.96:9099/api/Sc_juanxin/update", data)
//   jieBangBtnMap[kuweiId] = false
//   refreshData()
// }


refreshData()
let updateTime = 0
setInterval(() => {
  updateTime++
  if (updateTime > 5) {
    // 每分鐘刷新
    updateTime = 0
    refreshData()
  }
  // 每秒刷新
  refrehJieBang()
}, 1000)

window['refreshData'] = refreshData
</script>

<style scoped>
.main {
  background-color: #fdfff1;
  width: 100vw;
  height: 100vh;
}

/* 自定义滚动条 */
::-webkit-scrollbar {
  width: 12px;
  /* 滚动条宽度 */
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  /* 滚动条轨道背景 */
}

::-webkit-scrollbar-thumb {
  background: #409EFF;
  /* 滚动条颜色 */
  border-radius: 9px;
  /* 圆角 */
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
  /* 鼠标悬停时的颜色 */
}
</style>
